<template>
  <div class="mainCard mainCardActive">
    <form @submit.prevent="registerSubmit">
      <div class="card">
        <div class="cardInput">
          <label>
            <Icon type="person-stalker"></Icon>
          </label>

          <p class="control">
            <input name="userName" v-model="userName" v-validate="'required|alpha'" data-vv-delay="1000"
                   :class="{'is-danger': errors.has('userName') }" type="text" placeholder="请输入用户名">
            <span v-show="errors.has('userName')" class="errSpan">{{ errors.first('userName') }}</span>
          </p>
        </div>
        <div class="cardInput">
          <label>
            <Icon type="locked"></Icon>
          </label>
          <p class="control">
            <input name="password" v-model="password" v-validate="'required|min:6|password'" data-vv-delay="1000"
                   :class="{'is-danger': errors.has('password') }" type="text" placeholder="请输入密码">
            <span v-show="errors.has('password')" class="errSpan">{{ errors.first('password') }}</span>
          </p>
        </div>
        <div class="cardInput">
          <label>
            <Icon type="locked"></Icon>
          </label>
          <p class="control">
            <input name="password2" v-model="password2" v-validate="'required|min:6|password'" data-vv-delay="1000"
                   :class="{'is-danger': errors.has('password2') }" type="text" placeholder="请再次输入密码">
            <span v-show="errors.has('password2')" class="errSpan">{{ errors.first('password') }}</span>
          </p>
        </div>
      </div>
      <div class="btn">
        <button class="btnRegister" type="submit">注册</button>
      </div>
    </form>
  </div>
</template>

<script>
  import api from '../../router/api'
  export default {
    name: 'register',
    data () {
      return {
        isActive: [true, false],
        userName: '',
        password: '',
        password2: ''
      }
    },
    methods: {
      registerClick() {
        let $this = this;
        let pram = {
          userName: $this.userName,
          password: $this.password
        };
        $this.$post($this, api.register, pram)
          .then(function (res) {
            if (res.code == 0) {
              $this.$Message.info(res.message);
              window.setTimeout(function () {
                if ($this && !$this._isDestroyed) { //_isDestroyed 组件是否被销毁
                  $this.$router.push({
                    path: '/login'
                  })
                }
              }, 1000)
            } else {
              $this.$Message.error(res.message);
            }
          })
          .catch(function (err) {
            console.log(err)
          });

      },
      registerSubmit() {
        let $this = this;
        $this.$validator.validateAll().then((result) => {
          if (result) {
            $this.registerClick();
            return;
          }
          $this.$Message.error('请准确输入账号密码');
        });
      }
    },
    created: function () {

    },
    components: {}
  }
</script>
